<template>
    <view class="container paddingBottomBar" :style="themeColor">
        <hx-navbar ref="hxnb" :config="config" id="nav">
            <block slot="center">
                <view class="tab">
                    <view class="tab-item" :class="{ current: currentTab == 0 }" @click="goTop">
                        <text>商品</text>
                        <view class="border"></view>
                    </view>
                    <view class="tab-item" :class="{ current: currentTab == 1 }" @click="goDetail">
                        <text>详情</text>
                        <view class="border"></view>
                    </view>
                </view>
            </block>
        </hx-navbar>
        <view class="banner">
            <view class="video" v-if="isBannerHasVideo && bannerType == 1">
                <video class="video-player" id="myVideo" :src="easyGetImgUrl(productInfo.VideoUrl)"
                    @error="videoErrorCallback" controls :poster="imgUrls[0]"></video>
            </view>
            <swiper v-show="bannerType == 0" class="swiper" @change="swiper">
                <swiper-item v-for="(item, index) in imgUrls" :key="index">
                    <image class="image" :src="item" mode="aspectFill" @tap="previewImage(index)"></image>
                </swiper-item>
            </swiper>
            <text class="page-num" v-if="bannerType == 0">{{ currentSwiper + 1 }}/{{ imgUrls.length }}</text>
            <view class="banner-type" v-if="isBannerHasVideo">
                <text class="type-text" :class="{ active: bannerType == 1 }" @click="changeType(1)">视频</text>
                <text class="type-text" :class="{ active: bannerType == 0 }" @click="changeType(0)">图片</text>
            </view>
        </view>
        <view class="mod-spike-meta" v-show="show">
            <view class="mod-spike-meta__price">
                <view>
                    <view>￥<text class="mod-spike-meta__price-num">{{ activity.Price }}</text></view>
                    <view><text class="mod-spike-meta__old-price">￥{{ activity.OriginalPrice }}</text></view>
                </view>
            </view>
            <view class="mod-spike-meta__group">
                <view class="mod-progress">
                    <view class="mod-progress__content">
                        <view class="mod-progress__track" style="background: #efdeb0">
                            <view class="mod-progress__runway"
                                :style="'width:' + activity.percent + '%;background: #793004;'"></view>
                        </view>
                    </view>
                    <view class="mod-progress__txt" style="color: #793004">已秒{{ activity.percent }}%</view>
                </view>
                <view>
                    <!--<text>VIP￥{{activity.VipPrice}}</text>-->
                    <!--<text class="mod-spike-meta__limit">限量{{activity.Quantity}}件</text>-->
                </view>
            </view>
            <view class="mod-spike-meta__countdown" v-if="activity">
                <view>
                    <view v-if="activity.timeStatus == 0">距开抢</view>
                    <view v-if="activity.timeStatus == 1">距结束仅剩</view>
                    <view v-if="activity.timeStatus == 2">已结束</view>
                    <view class="countdown">{{ activity.CountDownStr }}</view>
                </view>
            </view>
        </view>
        <!-- end 商品价格、倒计时等 -->

        <view class="info-item desc-item">
            <view class="product-name">
                <text class="product-name-text">{{ productInfo.ProductName }}</text>
                <text class="product-desc-text" v-if="productInfo.ShortDescription">{{
                    productInfo.ShortDescription
                    }}</text>
            </view>
            <view class="price-item" v-show="productInfo.ProductName">
                <!-- #ifdef MP -->
                <button class="btn-share" open-type="share">
                    <iconsfont customIcons="icon-zhuanfa" color="#999"></iconsfont>
                    <text>分享</text>
                </button>
                <!-- #endif -->
            </view>
        </view>
        <view class="info-item show-num-item" v-if="activity.LimitBuy > 0">
            <text>限购：{{ activity.LimitBuy }}件</text>
        </view>
        <view class="info-item" v-if="productInfo.specNum > 1" @click="showSku()">
            <view class="label">
                <text class="label-text">规格</text>
                <!-- 				<text class="value-text" v-for="(item,index) in productInfo.ProductAttributesList" :key="index">
					{{item.AttributeName}};</text> -->
                <text class="value-text">{{ productInfo.specNum }}种规格可选</text>
            </view>
            <uni-icons type="arrowright" customIcons="icon-gray-4"></uni-icons>
        </view>
        <view class="comment" v-if="comment && commentTotalNum > 0">
            <view class="info-item" @click="goCommentFn">
                <view class="label">
                    <text class="label-text text-bold">评价({{ commentTotalNum }})</text>
                </view>
                <text v-if="comment.length >= 1">查看更多</text>
                <uni-icons type="arrowright" v-if="comment.length >= 1" customIcons="icon-gray-4"></uni-icons>
            </view>
            <comment-list-item :showReply="false" v-for="(item, index) in [comment[0]]" :key="index"
                v-if="comment.length > 0" :item="item"></comment-list-item>
        </view>
        <item-title-border class="product-content" text="商品详情"></item-title-border>
        <view class="info-item">
            <rich-text @tap="showImg"
                :nodes="formatRichTextFn(productInfo.Description ? productInfo.Description : description)">
            </rich-text>
        </view>
        <buy-bottom-seckill-bar v-show="show" :orderType="orderType" :IsFavorite="data.IsFavorite" :activity="activity"
            @favoriteFn="favoriteFn" @showSku="showSku"></buy-bottom-seckill-bar>
        <!-- <uni-popup type="bottom" ref="popSku" @change="skuChange">
			<seckill-product-spec :data="optPopup.data" :fresh="optPopup.change" :popup-type="optPopup.type"
				@closePopup="closePopup">
			</seckill-product-spec>
		</uni-popup> -->
        <uni-popup type="bottom" ref="popSku" @change="skuChange">
            <product-spec :data="optPopup.data" :fresh="optPopup.change" :popup-type="optPopup.type"
                @closePopup="closePopup" :seckill="1" :orderType="orderType" :activityId="activity.ActivityMainId"
                @addCart="addCart" @addBatch="addBatch" @setCarListFunc="setCarListFunc" @changeUnit="changeUnit">
            </product-spec>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations, mapState } from "vuex"
import appMixin from "@/utils/appMixin.js"
import storage from "@/uni-sub-base/utils/storage.js"
import productFeature from "@/pages_shop/components/common/product-feature.vue"
import buyBottomSeckillBar from "@/pages_shop/components/product/buy-bottom-seckill-bar.vue"
import itemTitleBorder from "@/pages_shop/components/common/item-title-border.vue"
import seckillProductSpec from "@/pages_shop/components/product/seckill-product-spec.vue"
import productSpec from "@/components/product/product-spec.vue"
import { formatRichText, getElementTop } from "@/uni-sub-base/utils/elementUtil.js"
import { favoriteFn } from "@/utils/productUtil.js"

import { getInintProductDetailInfo, getCommentListByProduct } from "@/service/api/product.js"
import { GetSeckillProductDetailInfo } from "@/service/api/seckill.js"
import { GetNowTime } from "@/service/api/activity.js"
import utilsOld from "@/utils/utilsOld.js"
import commentListItem from "@/uni-sub-base/components/comment/list-item.vue"
export default {
    components: {
        productFeature,
        buyBottomSeckillBar,
        itemTitleBorder,
        seckillProductSpec,
        productSpec,
        commentListItem,
    },
    data() {
        return {
            show: false,
            isBannerHasVideo: false,
            bannerType: 0,
            currentSwiper: 0,
            currentTab: 0,
            detailTop: 0,
            config: {
                height: 44,
                barPlaceholder: false,
                color: ["#ffffff", "#333333"],

                //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
                backgroundColor: [0, "#ffffff"],
                slideBackgroundColor: [1, "#ffffff"],
                // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 Scroll 事件
                statusBarFontColor: ["#ffffff", "#000000"],
                centerSlot: true,
                // centerSlotSwitch: true,
            },
            tabOpacity: 0,
            tabTop: 44,
            imgUrls: [],
            isHeart: false,
            description: '<span style="font-size:12px">暂无详情</span>',
            share: {
                title: "",
                path: "/pages_shop/packet/product/seckillDetail",
                imageUrl: "",
                desc: "",
                content: "",
            },
            systemInfo: {},
            videoContext: {},
            data: {},
            activity: {},
            copyactivity: {},
            attrList: [],
            nowTime: null,
            productInfo: {},
            currentDate: {
                CurrentMaxPrice: 0,
                CurrentMinPrice: 0,
                CurrentUnit: "",
            },
            param: {
                productId: 0,
            },
            comment: [],
            // sku 商品规格弹窗
            optPopup: {
                data: {},
                type: "",
                change: false,
                show: true,
            },
            commentTotalNum: 0,
            descriptionImg: [],
            orderType: -1,
        }
    },
    onLoad(e) {
        this.param = {
            productId: e.id,
        }
        this.share.path = "/pages_shop/packet/product/seckillDetail?id=" + e.id
    },
    mounted() {
        let webInfo = storage.getCache("webInfo")
        this.getInit()
        this.getData(webInfo)
        this.getCommentListByProduct()
    },
    methods: {
        ...mapMutations(["UP_VIEW"]),
        //获取评论
        getCommentListByProduct() {
            let param = {
                page: 1,
                product_id: this.param.productId,
                size: 3,
            }
            getCommentListByProduct(param).then((res) => {
                if (res.Data && res.Data.Data.length > 0) {
                    this.comment = res.Data.Data
                    this.commentTotalNum = res.Data.RecordAmout
                }
            })
        },
        //获取商品详情
        getData(info) {
            uni.showLoading({
                title: "加载中",
            })
            let path = "?id=" + this.param.productId
            if (info.IsSelectWarehouse == 1) {
                let warehouse = storage.getCache("warehouse")
                path = path + "&warehouseId=" + warehouse.WarehouseId
            }
            GetSeckillProductDetailInfo(path).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data.ProductInfo
                    this.activity = res.Data.ActivityInfo
                    this.attrList = res.Data.ActivityInfo.AttrList
                    this.productInfo = this.data.ProductInfo

                    //是否有视频
                    this.isBannerHasVideo = this.productInfo.VideoUrl && this.productInfo.VideoUrl != ""
                    this.bannerType = this.isBannerHasVideo ? 1 : 0
                    this.videoContext = uni.createVideoContext("myVideo")

                    //取出详情图片
                    this.getDescriptionImg(this.productInfo.Description)

                    // 设置显示的动态值
                    this.productInfo.CurrentMaxPrice =
                        this.productInfo.SaleMaxPrice % 1 === 0
                            ? this.productInfo.SaleMaxPrice
                            : Number(this.productInfo.SaleMaxPrice.toFixed(2)) // 显示最高价格
                    this.productInfo.CurrentMinPrice =
                        this.productInfo.SaleMinPrice % 1 === 0
                            ? this.productInfo.SaleMinPrice
                            : Number(this.productInfo.SaleMinPrice.toFixed(2)) // 显示最低价格
                    this.productInfo.CurrentUnit = this.productInfo.ProductUnitList[0].UnitName // 显示当前单位
                    this.productInfo.CurrentUnitId = this.productInfo.ProductUnitList[0].UnitId // 显示当前单位
                    this.currentDate.CurrentMaxPrice = this.productInfo.CurrentMaxPrice
                    this.currentDate.CurrentMinPrice = this.productInfo.CurrentMinPrice
                    this.currentDate.CurrentUnit = this.productInfo.CurrentUnit
                    this.productInfo.CurrentStock = this.productInfo.V_StockSum // 显示当前库存
                    this.productInfo.UnitActiveIndex = 0 // 单规格商品默认显示第一个加减框

                    this.imgUrls = []
                    let imgs = this.productInfo.ImageUrl.split(",")
                    imgs.forEach((e) => {
                        this.imgUrls.push(this.easyGetImgUrl(e))
                    })
                    //设置分享信息
                    this.share = {
                        title: this.productInfo.ProductName,
                        path:
                            "/pages_shop/packet/product/seckillDetail" +
                            "?id=" +
                            this.param.productId +
                            "&InfoType=" +
                            this.param.InfoType,
                        imageUrl: this.imgUrls[0],
                        desc: "",
                        content: "",
                    }

                    this.changeArr()

                    //秒杀活动相关
                    var percent = (this.activity.UseQty / this.activity.Quantity) * 100
                    if (this.activity.UseQty > 0 && percent.toFixed(1) < 1) {
                        this.activity.percent = 1
                    } else if (99 <= percent.toFixed(1) && percent.toFixed(1) < 100) {
                        this.activity.percent = 99
                    } else {
                        this.activity.percent = percent.toFixed(0)
                    }
                    this.$set(this.activity, "timeStatus", 0)
                    this.$set(this.activity, "CountDownStr", "")
                    GetNowTime().then((rsp) => {
                        if (res.State == 1) {
                            this.nowTime = new Date(rsp.Data.replace(/-/g, "/")).getTime()
                            this.setInterval()
                        }
                    })
                    this.copyactivity = JSON.parse(JSON.stringify(this.activity))
                    setTimeout((e) => {
                        this.show = true
                    }, 1200)
                    uni.hideLoading()
                } else {
                    uni.hideLoading()
                    this.easyToast(res.Msg)
                    setTimeout((e) => {
                        this.easyGoBack()
                    }, 1500)
                }
            })
        },
        setInterval() {
            var that = this
            //当前时间
            setInterval((e) => {
                that.nowTime += 1000
                that.setCountDown()
            }, 1000)
        },
        setCountDown() {
            if (!this.activity) {
                return
            }
            this.activity.timeStatus = 0
            var diff = new Date(this.activity.StartTime.replace(/-/g, "/")).getTime() - this.nowTime
            if (diff < 0) {
                this.activity.timeStatus = 1
                diff = new Date(this.activity.EndTime.replace(/-/g, "/")).getTime() - this.nowTime //时间差的毫秒数
            }
            if (diff >= 0) {
                //计算出相差天数
                var days = Math.floor(diff / (24 * 3600 * 1000))
                //计算出小时数
                var leave1 = diff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
                var hours = Math.floor(leave1 / (3600 * 1000))
                //计算相差分钟数
                var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
                var minutes = Math.floor(leave2 / (60 * 1000))
                //计算相差秒数
                var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
                var seconds = Math.round(leave3 / 1000)
                this.activity.CountDown = {
                    Days: (days > 9 ? "" : "0") + days,
                    Hours: (hours > 9 ? "" : "0") + hours,
                    Minutes: (minutes > 9 ? "" : "0") + minutes,
                    Seconds: (seconds > 9 ? "" : "0") + seconds,
                }
            } else {
                this.activity.CountDown = {
                    Days: "00",
                    Hours: "00",
                    Minutes: "00",
                    Seconds: "00",
                }
                this.activity.timeStatus += 1
            }
            this.activity.CountDownStr =
                (this.activity.CountDown.Days > 0 ? this.activity.CountDown.Days + "天" : "") +
                this.activity.CountDown.Hours +
                ":" +
                this.activity.CountDown.Minutes +
                ":" +
                this.activity.CountDown.Seconds
        },
        formatRichTextFn(text) {
            return formatRichText(text)
        },
        //收藏商品
        favoriteFn() {
            let isCancel = this.data.IsFavorite == 1
            let param = {
                isCancel: isCancel,
                productId: this.activity.ProductId,
            }
            favoriteFn(param).then((res) => {
                this.data.IsFavorite = isCancel ? 0 : 1
                this.easyToast(isCancel ? "取消收藏" : "收藏成功")
                //通知外面更新
                this.UP_VIEW(new Date().getTime())
            })
        },
        goDetail() {
            //到达商品详情锚点

            uni.createSelectorQuery()
                .in(this)
                .select(".product-content")
                .boundingClientRect((data) => {
                    //目标位置的节点：类或者id
                    uni.createSelectorQuery()
                        .in(this)
                        .select(".container")
                        .boundingClientRect((res) => {
                            //最外层盒子的节点：类或者id
                            uni.pageScrollTo({
                                duration: 200, //过渡时间
                                scrollTop: data.top - res.top - this.systemInfo.statusBarHeight - 44, //44为head的高度
                            })
                        })
                        .exec()
                })
                .exec()
        },
        goTop() {
            //到达顶部
            uni.pageScrollTo({
                duration: 200, //过渡时间
                scrollTop: 0, //到达距离顶部的top值
            })
        },
        getInit() {
            //获取系统信息
            this.systemInfo = uni.getSystemInfoSync()
            //获取详情所在高度
            getElementTop(
                this,
                ".product-content",
                (e) => {
                    this.detailTop = Number(e.split("px")[0]) - this.systemInfo.statusBarHeight - 44 - 1
                },
                true,
            )
        },
        swiper(e) {
            this.currentSwiper = e.detail.current
        },
        changeType(type) {
            //切换banner 类型 0图片 1视频
            this.bannerType = type
            if (type == 0) {
                this.videoContext.pause()
            }
        },
        videoErrorCallback(e) { },
        showSku(e) {
            this.showPopSku = true
            this.optPopup.type = "attr"
            this.optPopup.data = this.productInfo
            this.$refs.popSku.open()
        },
        skuChange(e) { },
        closePopup() {
            this.$refs.popSku.close()
        },
        // 整理数据
        changeArr() {
            const _this = this
            let item = this.productInfo
            item.ProductUnitList = this.data.ProductUnitExList
            // 图片列表
            if (item.ImageUrl) {
                const ImgUrlList = utilsOld.strToArr(item.ImageUrl)
                item.logo = ImgUrlList[0]
            }
            if (item.ThumbnailUrl160) {
                item.logo = item.ThumbnailUrl160
            }

            // 设置显示的动态值
            item.CurrentMaxPrice =
                item.SaleMaxPrice % 1 === 0 ? item.SaleMaxPrice : Number(item.SaleMaxPrice.toFixed(item.PriceDigits)) // 显示最高价格
            item.CurrentMinPrice =
                item.SaleMinPrice % 1 === 0 ? item.SaleMinPrice : Number(item.SaleMinPrice.toFixed(item.PriceDigits)) // 显示最低价格
            item.CurrentUnit = item.ProductUnitList[0].UnitName // 显示当前单位
            item.CurrentUnitId = item.ProductUnitList[0].UnitId // 显示当前单位ID
            item.CurrentStock = item.V_StockSum // 显示当前库存
            item.UnitActiveIndex = 0 // 单规格商品默认显示第一个加减框

            // 单位栏添加
            if (item.ProductUnitList.length > 0) {
                item.ProductUnitList.forEach((ite) => {
                    ite.Title = ite.UnitName + (ite.Ratio !== 1 ? "=" + ite.Ratio + item.CurrentUnit : "")

                    this.initLoopArr(ite.ProductSkuAttrList)
                })
            }

            let specNum = 0
            // ProductSkuList数据修改
            item.ProductSkuList.forEach((ite) => {
                if (ite.IsLock == 0) {
                    specNum++
                }
                if (ite.ProductUnitPriceList[0]) {
                    ite.CurrentPrice =
                        ite.ProductUnitPriceList[0].Price % 1 === 0
                            ? ite.ProductUnitPriceList[0].Price
                            : Number(ite.ProductUnitPriceList[0].Price.toFixed(2))
                    ite.CurrentUnit = ite.ProductUnitPriceList[0].UnitName // 显示当前单位
                    ite.CurrentUnitId = ite.ProductUnitPriceList[0].UnitId // 显示当前单位ID
                    ite.UnitActiveIndex = 0 // 单规格商品默认显示第一个加减框
                    ite.ProductUnitPriceList.forEach((it) => {
                        it.Amount = 0
                        it.Title = it.UnitName + (it.Ratio !== 1 ? "=" + it.Ratio + ite.CurrentUnit : "")
                    })
                }
            })
            item.specNum = specNum
            this.productInfo = item
        },

        // 遍历规格，数量清零
        initLoopArr(arr) {
            if (arr && arr.length > 0) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].ProductAttrList && arr[i].ProductAttrList.length > 0) {
                        this.initLoopArr(arr[i].ProductAttrList)
                    } else {
                        if (arr[i].SkuModel && arr[i].SkuModel.ProductUnitPrice) {
                            arr[i].SkuModel.ProductUnitPrice.Amount = 0
                        }
                    }
                }
            }
        },
        addCart(e) {
            this.$refs.popSku.close()
        },
        buyNow() {
            let datas = this.getTempCartData
            let path = "?orderType=" + this.orderType
            AddOrUpdateTempAmount(datas, path).then((res) => {
                let param = {
                    isTempCar: true,
                }
                getUserCarList(param).then((e) => {
                    let ids = []
                    e.Data.forEach((item) => {
                        ids.push(item.ID)
                    })

                    this.easyGoTo("/pages_shop/packet/order/submitOrder?ids=" + ids.join(",") + "&isTempCar=1")
                })
            })
        },
        addBatch(e) {
            this.$refs.popSku.close()
        },
        setCarListFunc(e) {
            // this.$refs.popSku.close()
        },
        changeUnit(item) {
            this.currentDate.CurrentMaxPrice = item.CurrentMaxPrice
            this.currentDate.CurrentMinPrice = item.CurrentMinPrice
            this.currentDate.CurrentUnit = item.CurrentUnit
        },
        goCommentFn() {
            if (this.comment.length < 1) {
                return
            }
            this.easyGoTo("/pages_shop/packet/comment/index?product_id=" + this.productInfo.ID)
        },
        previewImage(index) {
            let that = this
            var current = index
            uni.previewImage({
                current: current,
                urls: that.easyImgList(that.imgUrls.join(",")),
            })
        },
        getDescriptionImg(text) {
            if (text && text != "") {
                let imgs = text.match(/<img[^>]+>/g)
                let arrImg = []
                if (imgs) {
                    for (var j = 0; j < imgs.length; j++) {
                        imgs[j].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
                            arrImg.push(capture)
                        })
                    }
                }

                this.descriptionImg = arrImg
            }
        },
        showImg(e) {
            if (this.descriptionImg && this.descriptionImg.length > 0) {
                uni.previewImage({
                    urls: this.descriptionImg,
                })
            }
        },
    },
    onPageScroll(e) {
        // 重点，用到滑动切换必须加上
        this.$refs.hxnb.pageScroll(e)
        const scrollTop = e.scrollTop
        if (scrollTop >= this.detailTop) {
            this.currentTab = 1
        } else {
            this.currentTab = 0
        }
    },
}
</script>

<style lang="scss">
.banner {
    position: relative;
    height: 750rpx;

    .video {
        width: 100%;
        height: 100%;

        .video-player {
            width: 100%;
            height: 100%;
        }
    }

    .swiper {
        height: 750rpx;

        .image {
            width: 100%;
            height: 100%;
        }
    }

    .page-num {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 40rpx;
        bottom: 40rpx;
        padding: 0 30rpx;
        height: 44rpx;
        border-radius: 40rpx;
        color: $color-white;
        background: rgba(0, 0, 0, 0.6);
    }

    .banner-type {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 50%;
        bottom: 40rpx;
        width: 160rpx;
        margin-left: -80rpx;
        height: 44rpx;
        border-radius: 40rpx;
        color: $color-white;
        background: rgba($color-white, 0.5);
        z-index: 9;

        .type-text {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            height: 44rpx;
            border-radius: 40rpx;
            font-size: $font-size-20;
        }

        .active {
            color: $color-white;
            background: rgba($color-black, 0.6);
        }
    }
}

.tab {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .tab-item {
        display: flex;
        flex: 1;
        width: 120rpx;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        text {
            font-size: $font-size-32;
            height: 40px;
            justify-content: center;
            margin-bottom: -10rpx;
        }

        .border {
            width: 60rpx;
            height: 4rpx;
            border-radius: 4rpx;
        }
    }

    .current {
        text {
            color: $app-color-main;
        }

        .border {
            background: $app-color-main;
        }
    }
}

.info-item {
    padding: $app-page-padding;
    background: $color-white;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;

    .label {
        flex: 1;

        .label-text {
            margin-right: 40rpx;
            font-size: $font-size-28;
            color: $color-gray-1;
            font-weight: bold;
        }

        .value-text {
            font-size: $font-size-28;
        }
    }
}

.comment-item {
    flex-direction: column;
    align-items: flex-start;
}

.price-item {
    margin-bottom: 0;
    padding-bottom: 0;

    .price {
        flex: 1;

        .price-box {
            display: flex;
            align-items: flex-end;

            .small {
                font-size: $font-size-28;
                margin-bottom: 8rpx;
            }
        }

        .original-price-text {
            display: flex;
            align-items: center;

            text {
                font-size: $font-size-20;
                color: $app-color-text-tip;
            }
        }

        .price-text {
            font-size: $font-size-52;
            color: $color-orange-1;
        }
    }
}

.desc-item {
    margin-bottom: 0;
    align-items: flex-start;

    .product-name {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-right: 30rpx;
    }
}

.btn-share {
    background: $color-gray-5;
    padding: 0;
    width: 120rpx;
    height: 56rpx;
    border-top-right-radius: 0rpx;
    border-bottom-right-radius: 0rpx;
    border-top-left-radius: 30rpx;
    border-bottom-left-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-right: -$app-item-padding;

    &::after {
        border: 0;
    }

    text {
        margin-top: 4rpx;
        margin-left: 10rpx;
    }
}

.product-name-text {
    font-weight: 700;
    margin-bottom: 20rpx;
    font-size: $font-size-30;
}

.product-desc-text {
    color: $app-color-text-tip;
}

.product-name-desc {
    color: $app-color-text-tip;
}

.product-content {
    display: flex;
    background: $color-white;
}

.show-num-item {
    border-top: solid 1rpx $line;

    text {
        margin-right: 20rpx;
        font-size: $font-size-22;
        color: $app-color-text-tip;

        &:last-child {
            display: flex;
            margin-right: 0;
            flex: 1;
            justify-content: flex-end;
        }
    }
}

.comment {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20rpx;

    .info-item {
        margin-bottom: 0;
    }
}

.pop-main {
    .main {
        font-size: 24rpx;
    }
}

.cxType {
    width: 56rpx;
    height: 36rpx;
    line-height: 36rpx;
    border-radius: 4rpx;
    border: 1rpx solid #c4181f;
    font-size: 20rpx;
    color: #c4181f;
    display: inline-block;
    text-align: center;
    margin-right: 12rpx;
}

.feature-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.no-worry-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-bottom: 10rpx;

    .img-no-worry {
        width: 90rpx;
        height: 24rpx;
        margin-right: 28rpx;
    }

    .no-worry-box {
        display: flex;
        flex-direction: row;
        margin-top: -6rpx;
        flex-direction: row;
        flex-wrap: wrap;

        .no-worry-text {
            position: relative;
            margin-right: 20rpx;
            padding-left: 10rpx;
            margin-bottom: 8rpx;

            &:after {
                content: " ";
                position: absolute;
                right: -16rpx;
                top: 14rpx;
                width: 6rpx;
                height: 6rpx;
                border-radius: 20rpx;
                background-color: $app-color-text-main;
            }
        }

        .last-no-worry-text {
            &:after {
                background-color: $transparent;
            }
        }
    }
}

/* 秒杀详情 */

.mod-spike-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100rpx;
    padding: 0 0 0 30rpx;
    background: url(@/static/img/detail-bg.jpg) no-repeat;
    background-size: cover;
    color: #793004;
}

.mod-spike-meta__price {
    margin: 0 30rpx 0 0;
}

.mod-spike-meta__price-num {
    font-size: 48rpx;
    line-height: 1em;
}

.mod-spike-meta__group {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 14rpx 0;
    overflow: hidden;
}

.mod-spike-meta__countdown {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 100rpx;
    padding: 0 20rpx 0;
    margin: 0 0 0 40rpx;
    background: #793004;
    color: #efdeb0;
}

.mod-spike-meta__countdown:before {
    position: absolute;
    top: 50%;
    left: -24rpx;
    width: 0;
    height: 0;
    border-top: 24rpx solid transparent;
    border-bottom: 24rpx solid transparent;
    border-right: 24rpx solid #793004;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    content: "";
}

.mod-spike-meta__old-price,
.mod-spike-meta__limit {
    font-size: 24rpx;
}

.mod-spike-meta__old-price {
    text-decoration: line-through;
}

.mod-spike-meta__limit {
    margin: 0 0 0 20rpx;
}

.mod-spike-meta .countdown {
    height: 36rpx;
    line-height: 36rpx;
    padding: 0 10rpx;
    border-radius: 8rpx;
    background: #efdeb0;
    color: #793004;
    text-align: center;
}

/* 矩形进度条 */

.mod-progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40rpx;
    line-height: 40rpx;
}

.mod-progress--warning .mod-progress__runway {
    background: #ff9500;
    color: #ff9500;
}

.mod-progress__content {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.mod-progress__track,
.mod-progress__runway {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.mod-progress__track {
    width: 100%;
    height: 8rpx;
    background: #e5e5e5;
    border-radius: 20rpx;
}

.mod-progress__runway {
    height: 100%;
    background: #ff6000;
    color: #ff6000;
    border-radius: 6rpx;
}

.mod-progress__runway:after {
    position: absolute;
    top: -50rpx;
    right: 0;
    color: currentColor;
    content: attr(data-runway);
}

.mod-progress__txt {
    margin: 0 0 0 10rpx;
    font-size: 24rpx;
    color: #999;
}

.mod-progress--lg {
    height: 60rpx;
    line-height: 60rpx;
}

/* end 矩形进度条 */
</style>
